<template>
  <div>
    <section class="todoapp">
      <header class="header">
        <h1>todos</h1>
        <input
          v-model="newTodo"
          class="new-todo"
          autocomplete="off"
          placeholder="What needs to be done?"
          @keydown.enter="onAddTodo"
        />
      </header>
      <section class="main" v-show="filterTodos.length" v-cloak>
        <input
          ref="imp"
          class="checkbox-all"
          type="checkbox"
          v-model="onClkAllCkx"
        />
        <ul class="todo-list">
          <li
            class="todo"
            v-for="todo in filterTodos"
            :class="{ completed: todo.completed, editing: todo == editTodoVal }"
            :key="todo.id"
          >
            <div class="view">
              <input
                class="checkbox"
                type="checkbox"
                v-model="todo.completed"
              />
              <label @dblclick="onEditTodo(todo)"> {{ todo.title }} </label>
              <button class="destroy" @click="removeTodo(todo)"></button>
            </div>
            <input
              class="edit"
              type="text"
              v-model="todo.title"
              v-todo-focus="todo == editTodoVal"
              @keyup.enter="saveTodo()"
              @blur="saveTodo()"
              @keyup.esc="cancelTodo(todo)"
            />
          </li>
        </ul>
      </section>
      <footer class="footer" v-show="todos.length" v-cloak>
        <span class="todo-count">
          <strong>{{ completedActived }}</strong> {{ completedItem }} left
        </span>
        <ul class="filters">
          <li>
            <a @click="onFilterTodo('all')">All</a>
          </li>
          <li>
            <a @click="onFilterTodo('unfinished')">Active</a>
          </li>
          <li>
            <a @click="onFilterTodo('completed')">Completed</a>
          </li>
        </ul>
        <button class="clear-completed" @click="clearComleted">
          Clear completed
        </button>
      </footer>
    </section>
    <footer class="info">
      <p>Double-click to edit a todo</p>
      <p>
        Written by
        <a href="http://evanyou.me">Evan You</a>
      </p>
      <p>
        Part of
        <a href="http://todomvc.com">TodoMVC</a>
      </p>
    </footer>
  </div>
</template>

<script>
import { localStorageTodos, filters } from "./assets/loaclStorageTodoMvc";
import { mapState, mapMutations, mapActions } from "vuex";
export default {
  data() {
    return {
      newTodo: "",
      visibility: "all",
      editTodoVal: null,
      beforeTodo: null,
    };
  },
  methods: {
    ...mapActions(["onAddTodo"]),
    ...mapMutations(["removeTodo", "editTodo", "cancelTodo", "clearComleted"]),
    onFilterTodo(val) {
      this.visibility = val;
    },
    onAddTodo() {
      if (this.newTodo.trim()) {
        this.$store.dispatch("onAddTodo", this.newTodo);
        this.newTodo = "";
      }
    },
    onEditTodo(todo) {
      this.editTodoVal = todo;
      this.beforeTodo = { ...todo };
    },
    saveTodo() {
      this.editTodoVal = null;
    },
    cancelTodo(todo) {
      this.$store.commit("cancelTodo", {
        oldVal: this.beforeTodo,
        newVal: todo,
      });
      this.editTodoVal = null;
    },
  },
  computed: {
    ...mapState(["todos", "allCkx"]),
    filterTodos() {
      return filters[this.visibility](this.todos);
    },
    completedActived() {
      return filters.unfinished(this.todos).length;
    },
    completedItem() {
      return this.completedActived > 1 ? "items" : "item";
    },
    onClkAllCkx: {
      get() {
        return this.completedActived == 0;
      },
      set(newVal) {
        console.log(newVal);
        this.$store.dispatch("onClkAllCkx", newVal);
      },
    },
  },
  watch: {
    todos: {
      handler(newVal) {
        localStorageTodos.save(newVal);
      },
      deep: true,
    },
  },
  directives: {
    "todo-focus"(el, binding) {
      if (binding.value) {
        el.focus();
      }
    },
  },
};
</script>

<style>
.checkbox {
  position: absolute;
  width: 25px;
  height: 25px;
  top: 14px;
  left: 10px;
}
.checkbox-all {
  position: absolute;
  width: 25px;
  height: 25px;
  top: -49px;
  left: 10px;
}
</style>
<style scoped>
</style>